<template>
	<a-pagination
		class="global-pagination"
		:current="props.current"
		:page-size="props.pageSize"
		:total="props.total"
		:page-size-options="pageSizeOptions"
		show-size-changer
		:show-total="(total: number) => `共 ${total} 条记录`"
		@change="ChangePagination"
	>
		<!-- <template #itemRender="pageItem">
			<LeftOutlined v-if="pageItem.type === 'prev'" />

			<rightOutlined v-else-if="pageItem.type === 'next'" />

			<span v-else-if="pageItem.type === 'page'">{{ pageItem.page }}</span>
		</template> -->
	</a-pagination>
</template>

<script setup lang="ts" name="GlobalPagination">
type _Props = {
	current: number;
	pageSize: number;
	total: number;
	pageSizeOptions?: string[];
};

const props = withDefaults(defineProps<_Props>(), {
	current: 1,
	pageSize: 10,
	total: 0,
	pageSizeOptions: () => ['10', '20', '30', '50', '100']
});

const emits = defineEmits<{
	(e: 'change', current: number, pageSize: number): void;
}>();

// 翻页操作
const ChangePagination = (current: number, pageSize: number): void => {
	emits('change', current, pageSize);
};
</script>

<style lang="less">
.global-pagination {
	margin-top: 10px;
	padding-top: 0;

	.ant-pagination-total-text {
		border: none !important;
	}

	li {
		color: @text02;

		span {
			color: @text02;
		}
	}
}
</style>
